<template>
  <div>
    <van-row class="showRow">
      <van-col :span="12">
        <span>获取数据1：{{ num1 }}</span>
      </van-col>
      <van-col :span="12">
        <span>获取用时(秒)：{{ time1 }}</span>
      </van-col>
    </van-row>
    <van-row class="showRow">
      <van-col :span="12">
        <span>获取数据2：{{ num2 }}</span>
      </van-col>
      <van-col :span="12">
        <span>获取用时(秒)：{{ time2 }}</span>
      </van-col>
    </van-row>
    <van-row class="showRow">
      <van-col :span="12">
        <span>获取数据3：{{ num3 }}</span>
      </van-col>
      <van-col :span="12">
        <span>获取用时(秒)：{{ time3 }}</span>
      </van-col>
    </van-row>
    <van-row class="showRow">
      <van-col :span="12">
        <span>数据总和：{{ num4 }}</span>
      </van-col>
      <van-col :span="12">
        <span>获取用时(秒)：{{ time4 }}</span>
      </van-col>
    </van-row>

    <van-row class="functions">
      <van-col :span="24"><span>功能演示</span></van-col>
    </van-row>
    <van-grid :column-num="2">
      <van-grid-item icon="exchange" text="异步演示" @click="asyncFun">
      </van-grid-item>
      <van-grid-item icon="replay" text="同步演示" @click="syncFun">
      </van-grid-item>
    </van-grid>
    <van-row v-show="showTips">
      <van-col :span="24" class="tip">
        注意：异步演示时，方法的执行是异步的，所以无法获取最终数据的总和
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'AsyncTest',
  data() {
    return {
      num1: '',
      num2: '',
      num3: '',
      num4: '',
      time1: 0,
      time2: 0,
      time3: 0,
      time4: 0,
      showTips: false
    }
  },
  methods: {
    // 异步
    getData1() {
      const timeInterval = setInterval(() => {
        this.time1 += 1
      }, 1000)
      setTimeout(() => {
        this.num1 = 1
        clearInterval(timeInterval)
      }, 2000)
    },
    getData2() {
      const timeInterval = setInterval(() => {
        this.time2 += 1
      }, 1000)
      setTimeout(() => {
        this.num2 = 2
        clearInterval(timeInterval)
      }, 4000)
    },
    getData3() {
      const timeInterval = setInterval(() => {
        this.time3 += 1
      }, 1000)
      setTimeout(() => {
        this.num3 = 3
        clearInterval(timeInterval)
      }, 1000)
    },

    asyncFun() {
      this.showTips = true
      this.resetData()
      this.getData1()
      this.getData2()
      this.getData3()
      this.num4 = '已执行' + this.num1 + this.num2 + this.num3
      this.time4 = this.time1 + this.time2 + this.time3
    },
    //同步
    getData1Sync() {
      const timeInterval = setInterval(() => {
        this.time1 += 1
      }, 1000)
      return new Promise((resolve) => {
        setTimeout(() => {
          clearInterval(timeInterval)
          resolve(11)
        }, 2000)
      })
    },
    getData2Sync() {
      const timeInterval = setInterval(() => {
        this.time2 += 1
      }, 1000)
      return new Promise((resolve) => {
        setTimeout(() => {
          clearInterval(timeInterval)
          resolve(22)
        }, 4000)
      })
    },
    getData3Sync() {
      const timeInterval = setInterval(() => {
        this.time3 += 1
      }, 1000)
      return new Promise((resolve) => {
        setTimeout(() => {
          clearInterval(timeInterval)
          resolve(33)
        }, 1000)
      })
    },
    async syncFun() {
      this.showTips = false
      this.resetData()
      this.num1 = await this.getData1Sync()
      this.num2 = await this.getData2Sync()
      this.num3 = await this.getData3Sync()
      this.num4 = this.num1 + this.num2 + this.num3
      this.time4 = this.time1 + this.time2 + this.time3
    },

    resetData() {
      this.num1 = ''
      this.num2 = ''
      this.num3 = ''
      this.num4 = ''
      this.time1 = 0
      this.time2 = 0
      this.time3 = 0
      this.time4 = 0
    }
  }
}
</script>

<style lang="less" scoped>
.showRow {
  background-color: #e6e6e6;
  padding: 0.2rem 0rem;
  border-bottom: #fff 1px solid;
}
.functions {
  margin-top: 0.5rem;
}
.tip {
  margin-top: 0.2rem;
  color: red;
  font-size: 12px;
}
</style>>

